<template>
<!-- 因为每个页面都是不一样的内容，但是头部都是一样的，所以把公共的部分直接封装为一个组件，这样调用起来非常的方便 -->
     <div class="tags-wrap">
            <div :class="{'tags':true,active:status==='all'?true:false}" @click="$router.replace('/user/order?status=all')">全部订单</div>
            <div :class="{'tags':true,active:status==='0'?true:false}" @click="$router.replace('/user/order?status=0')">待付款</div>
            <div :class="{'tags':true,active:status==='1'?true:false}" @click="$router.replace('/user/order?status=1')">待收货</div>
            <div :class="{tags:true, active:status==='2'?true:false}" @click="$router.replace('/user/order/review?status=2')">待评价</div>
    </div>
</template>

<script>
export default {
    name:"order-tags",
    props:{
        status:{
            type:String,
            default:"all"
        }
    }
}
</script>

<style scoped>
    .tags-wrap {
        width: 100%;
        height: 0.8rem;
        background-color: #ffffff;
        position: fixed;
        z-index: 2;
        left: 0;
        top: 1.02rem;
        border-bottom: #dcdcdc solid 1px;
        display: flex;
        display: -webkit-flex;
    }
    .tags-wrap .tags {
        width: 25%;
        height: 100%;
        text-align: center;
        font-size: 0.28rem;
        line-height: 0.8rem;
    }
    .tags-wrap .tags.active {
        border-bottom: #e42321 solid 1px;
    }
</style>